<template>
	<div class="content_page">
		<h4>any2qrcode</h4>
		<p>请使用xpath语法查找</p>
		<input type="text" @change="handleInputChange" />
		<div id="any2qrcode_qrcode_image"></div>
	</div>
</template>

<script setup>
import QRCode from 'qrcodejs2';
import { onMounted } from 'vue';

let qrCode = null

function handleInputChange(event) {
	const node = document.evaluate(event?.target?.value, document.documentElement).iterateNext();
	qrCode && qrCode.makeCode(node.value || node.textContent);
}

onMounted(() => {
	qrCode = new QRCode(document.getElementById('any2qrcode_qrcode_image'), {
		text: '',
		width: 128,
		height: 128,
		colorDark: '#000000',
		colorLight: '#ffffff',
		correctLevel: QRCode.CorrectLevel.H
	});
})

</script>

<style lang="less" scoped>
.content_page {
	color: red;
	position: fixed;
	z-index: 100001;
	right: 10px;
	top: 10px;
	width: 200px;
	background: #fff;
	text-align: center;
	h4 {
		font-size: 22px;
	}
	p {
		font-size: 20px;
	}
	input {
		border: 2px dashed #000;
		outline: none;
		height: 20px;
	}
}
#any2qrcode_qrcode_image {
	margin-top: 5px;
	display: flex;
	justify-content: center;
}
</style>
